<extend name="Public/base"/>
<block name="style">
    <style type="text/css">.webuploader-pick{border: none!important;}</style>
</block>
<block name="body">
    <notempty name="tab_nav">
        <div class="builder-tabs builder-form-tabs">
            <ul class="nav nav-tabs">
                <volist name="tab_nav.tab_list" id="tab">
                    <li class="<php>if($tab_nav['current_tab'] == $key) echo 'active';</php>"><a href="{$tab.href}">{$tab.title}</a></li>
                </volist>
            </ul>
        </div>
    </notempty>

<div class="builder formbuilder-box">

	  <div class="row">    

        <div class="col-md-7">      

	        <form action="{$post_url}" method="post" class="form-builder form-horizontal">
            <fieldset>
		          <volist name="fieldList" id="field" key="k">
		        		<switch name="field.type">
	        				 <include file="./Apps/Admin/View/Builder/Fields/text.html"/>{// 文本 } 
                             <include file="./Apps/Admin/View/Builder/Fields/number.html"/>{// 数字 } 
	        				 <include file="./Apps/Admin/View/Builder/Fields/hidden.html"/>{// 隐藏 } 
	        				 <include file="./Apps/Admin/View/Builder/Fields/password.html"/>{// 密码 } 
	        				 <include file="./Apps/Admin/View/Builder/Fields/textarea.html"/>{// 内容编辑框 }
                             <include file="./Apps/Admin/View/Builder/Fields/ueditor.html"/>{// 富文本编辑框 }
                             <include file="./Apps/Admin/View/Builder/Fields/radio.html"/>{// 单选框 } 
                             <include file="./Apps/Admin/View/Builder/Fields/checkbox.html"/>{// 复选框 } 
	        				 <include file="./Apps/Admin/View/Builder/Fields/select.html"/>{// 下拉框 } 
                             <include file="./Apps/Admin/View/Builder/Fields/multilayer_select.html"/>{// 多层级下拉框 } 
                             <include file="./Apps/Admin/View/Builder/Fields/email.html"/>{// 邮箱 } 
	        				 <include file="./Apps/Admin/View/Builder/Fields/city.html"/>{// 城市 } 
                             <include file="./Apps/Admin/View/Builder/Fields/icon.html"/>{//图标 } 
	        				 <include file="./Apps/Admin/View/Builder/Fields/picture.html"/>{// 图片 } 
	        				 <include file="./Apps/Admin/View/Builder/Fields/pictures.html"/>{//多图片 } 
	        				 <include file="./Apps/Admin/View/Builder/Fields/file.html"/>{// 文件 } 
                              <case value="group">
                                    <div class="form-group"></div>
                                    <div class="builder-tabs form-group">
                                        <ul class="nav nav-tabs">
                                            <volist name="field.options" id="li" key="group_k">
                                                <li data-tab="tab{$group_k}" <eq name="group_k" value="1">class="active"</eq>><a href="#tab{$group_k}" data-toggle="tab">{$li.title}</a></li>
                                            </volist>
                                        </ul>
                                    </div>
                                    <div class="builder-container">
                                        <div class="tab-content">
                                            <volist name="field.options" id="tab" key="group_k">
                                                <div id="tab{$group_k}" class='tab-pane <eq name="group_k" value="1">active</eq> tab{$group_k}'>
                                                    <div class="group">
                                                        <volist name="tab.options" id="field" key="tab_k">
                                                            <switch name="field.type">
                                                                 <include file="./Apps/Admin/View/Builder/Fields/text.html"/>{// 文本 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/number.html"/>{// 数字 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/hidden.html"/>{// 隐藏 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/password.html"/>{// 密码 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/textarea.html"/>{// 内容编辑框 }
                                                                 <include file="./Apps/Admin/View/Builder/Fields/ueditor.html"/>{// 富文本编辑框 }
                                                                 <include file="./Apps/Admin/View/Builder/Fields/radio.html"/>{// 单选框 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/checkbox.html"/>{// 复选框 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/select.html"/>{// 下拉框 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/multilayer_select.html"/>{// 多层级下拉框 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/email.html"/>{// 邮箱 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/city.html"/>{// 城市 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/icon.html"/>{//图标 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/picture.html"/>{// 图片 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/pictures.html"/>{//多图片 } 
                                                                 <include file="./Apps/Admin/View/Builder/Fields/file.html"/>{// 文件 } 
                                                                // 扩展类型
                                                                <default />
                                                                {:hook('FormBuilderExtend', array('form' => $tab_form, 'type' => tab_))}
                                                            </switch>
                                                        </volist>
                                                    </div>
                                                </div>
                                            </volist>
                                        </div>
                                    </div>
                                    <div class="form-group"><hr></div>
                                </case>
	        				 <default/>{:hook('FormBuilderExtend', array('form' => $form))}
		        		</switch>
		        	</volist>

                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-2 tc">
                             <volist name="buttonList" id="button">
                                    <button {$button.attr}>{$button.title}</button>  &nbsp;
                             </volist>

                      </div>
                  </div>

                 </fieldset>
	        </form>

            </div>    
	 </div>
 </div>

</block>

<block name="script">

    <if condition="$importDatetimePicker">
        <link href="__PUBLIC__/lib/datetimepicker/datetimepicker.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="__PUBLIC__/lib/datetimepicker/datetimepicker.min.js"></script>

        <script>
            $('.form-datetime').datetimepicker({
                language: "zh-CN",
                autoclose: true,
                format: 'yyyy-mm-dd hh:ii'
            });
            $('.form-date').datetimepicker({
                language: "zh-CN",
                minView: 2,
                autoclose: true,
                format: 'yyyy-mm-dd'
            });
            $('.form-time').datetimepicker({
                language: "zh-CN",
                minView: 0,
                startView:1,
                autoclose: true,
                format: 'hh:ii'
            });
            $('.time').change(function () {
                var fieldName = $(this).attr('data-field-name');
                var dateString = $(this).val();
                var date = new Date(dateString);
                var timestamp = date.getTime();
                $('[name=' + fieldName + ']').val(Math.floor(timestamp / 1000));
            });
        </script>
    </if>
    <if condition="$colorPicker">
        <script type="text/javascript" src="__JS__/jquery.simple-color.js"></script>
        <script>
            $(function(){
                $('.simple_color_callback').simpleColor({
                    boxWidth:20,
                    cellWidth: 20,
                    cellHeight: 20,
                    chooserCSS:{ 'z-index': 500 },
                    displayCSS: { 'border': 0 ,
                        'width': '32px',
                        'height': '32px',
                        'margin-top': '-32px'
                    },
                    onSelect: function(hex, element) {
                        $('#tw_color').val('#'+hex);
                    }
                });
                $('.simple_color_callback').show();
                $('.simpleColorContainer').css('margin-left','105px');
                $('.simpleColorDisplay').css('border','1px solid #DFDFDF');
            });
            var setColorPicker=function(obj){
                var color=$(obj).val();
                $(obj).parents('.color-picker').find('.simpleColorDisplay').css('background',color);
            }
        </script>
    </if>   

    <link href="__PUBLIC__/lib/icon_picker/iconpicker.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="__PUBLIC__/lib/icon_picker/iconpicker.js"></script>


    <if condition="$importCheckBox">
        <script>
            $(function () {
                function implode(x, list) {
                    var result = "";
                    for (var i = 0; i < list.length; i++) {
                        if (result == "") {
                            result += list[i];
                        } else {
                            result += ',' + list[i];
                        }
                    }
                    return result;
                }

                $('.oneplus-checkbox').change(function (e) {
                    var fieldName = $(this).attr('data-field-name');
                    var checked = $('.oneplus-checkbox[data-field-name=' + fieldName + ']:checked');
                    var result = [];
                    for (var i = 0; i < checked.length; i++) {
                        var checkbox = $(checked.get(i));
                        result.push(checkbox.attr('value'));
                    }
                    result = implode(',', result);
                    $('.oneplus-checkbox-hidden[data-field-name=' + fieldName + ']').val(result);
                });
            })
        </script>
    </if>

    <link type="text/css" rel="stylesheet" href="__PUBLIC__/lib/magnific/magnific-popup.css"/>
    <script type="text/javascript" src="__PUBLIC__/lib/magnific/jquery.magnific-popup.min.js"></script>

    <link href="__PUBLIC__/lib/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/lib/webuploader/js/webuploader.js"></script>
    <script>
        $(document).ready(function () {
            $('.popup-gallery').each(function () { // the containers for all your galleries
                $(this).magnificPopup({
                    delegate: 'a',
                    type: 'image',
                    tLoading: '正在载入#%curr%...',
                    mainClass: 'mfp-img-mobile',
                    gallery: {
                        enabled: true,
                        navigateByImgClick: true,
                        preload: [0, 1] // Will preload 0 - before current, and 1 after the current image

                    },
                    image: {
                        tError: '<a href="%url%">图片#%curr%</a>无法被载入.',
                        titleSrc: function (item) {
                            /*           return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';*/
                            return '';
                        },
                        verticalFit: true
                    }
                });
            });
            {$myJs}
        });
    </script>
</block>